<template>
  <!-- 磁盘信息卡片 -->
  <el-card class="disk-card" shadow="never">
    <template #header>
      <div class="card-header">
        <span
          ><el-icon><Files /></el-icon> 磁盘状态</span
        >
      </div>
    </template>
    <div class="disk-list" :class="{ 'two-columns': disks.length >= 4 }">
      <div v-for="disk in disks" :key="disk.mount" class="disk-item">
        <div class="disk-info">
          <div class="disk-mount">{{ disk.mount }}</div>
          <div class="disk-usage-text">
            {{ formatFileSize(disk.used) }} / {{ formatFileSize(disk.total) }}
          </div>
        </div>
        <el-progress
          :percentage="getDiskUsagePercentage(disk)"
          :stroke-width="10"
          :color="getProgressColor(getDiskUsagePercentage(disk))"
          :show-text="false"
        />
        <div class="disk-percent">{{ getDiskUsagePercentage(disk) }}%</div>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import { ElCard, ElProgress, ElIcon } from 'element-plus'
import { Files } from '@element-plus/icons-vue'
import { formatFileSize } from '@/utils/format'

/**
 * 定义组件的 props
 * @param {Array} disks - 包含磁盘信息的数组
 */
const props = defineProps({
  disks: {
    type: Array,
    required: true,
    default: () => [],
  },
})

/**
 * 计算磁盘使用率
 * @param {Object} disk - 磁盘对象
 * @returns {Number} - 磁盘使用率百分比
 */
const getDiskUsagePercentage = (disk) => {
  if (!disk.total) return 0
  return parseFloat(((disk.used / disk.total) * 100).toFixed(2))
}

/**
 * 根据使用率返回不同的进度条颜色
 * @param {Number} percentage - 使用率
 * @returns {String} - 颜色值
 */
const getProgressColor = (percentage) => {
  if (percentage > 90) return 'var(--el-color-error)'
  if (percentage > 70) return 'var(--el-color-warning)'
  return 'var(--el-color-primary)'
}
</script>

<style lang="scss" scoped>
@use '@/assets/styles/mixins.scss' as *;
.disk-list {
  display: grid;
  gap: 24px 16px;
  grid-template-columns: 1fr;
}

.disk-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.disk-info {
  @include flex-between;
  align-items: baseline;
}

.disk-mount {
  font-weight: 500;
  font-size: 15px;
  color: var(--el-text-color-primary);
}

.disk-usage-text {
  font-size: 13px;
  color: var(--el-text-color-secondary);
  font-family: 'Courier New', Courier, monospace;
}

.disk-percent {
  font-size: 14px;
  font-weight: bold;
  font-family: 'Courier New', Courier, monospace;
  color: var(--el-text-color-secondary);
  align-self: flex-end;
  margin-top: -4px;
}

@media (min-width: 769px) {
  .disk-list.two-columns {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>
